import React from 'react';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import { RESOURCE_HOST } from 'Constants/config';
import './../interactive.scss';

class ComplaintDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      content: {}
    }
    this.renderMedia = ::this.renderMedia;
  }
  componentWillMount() {
    this.initData();
  }
  initData() {
    const api = new Api({
      method: 'GET',
      path: `/reports/user/${this.state.id}`,
      success: (json) => {
        this.setState({
          content: json
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  renderMedia(content) {
    if (content.report_type === 'video') {
      return (
        <video controls preload autoPlay className="video" src={`${RESOURCE_HOST}mobile/${content.video_audio}`}>
        </video>
      );
    } else if (content.report_type === 'audio') {
      return (
        <audio controls className="audio" src={`${RESOURCE_HOST}${content.video_audio}`}>
        </audio>
      );
    }
    return '';
  }
  render() {
    const { content } = this.state;
    return (
      <div className="interactive-detail-page">
        <div className="header-wrap">
          历史举报详情
        </div>
        <div className="content-wrap">
          <div className="content-row">
            <div>标题：</div>
            <div>{ content.title || ''}</div>
          </div>
          <div className="content-row">
            <div>投诉对象：</div>
            <div>{ content.report_target || ''}</div>
          </div>
          <div className="content-row">
            <div>投诉内容：</div>
            <div>
              {
                content.content ? <span dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }} /> : ''
              }
            </div>
          </div>
          <div className="media-wrap">
            {
              content.report_type ? this.renderMedia(content) : ''
            }
          </div>
        </div>
      </div>
    )
  }
}

export default ComplaintDetail;
